<template>
  <div class="payment-container">
    <div class="page-header">
      <h1 class="page-title">选择缴费方式</h1>
      <div class="step-indicator"></div>
    </div>

    <div class="content-wrapper">
      <div class="card">
        <div class="card-header">
          <el-icon class="card-header-icon"><InfoFilled /></el-icon>
          <span>挂号信息</span>
        </div>
        
        <div class="info-grid">
          <div class="info-item">
            <span class="label">科室：</span>
            <span class="value">{{ appointmentInfo.department_name }}</span>
          </div>
          <div class="info-item">
            <span class="label">医生：</span>
            <span class="value">{{ appointmentInfo.doctor }}</span>
          </div>
          <div class="info-item">
            <span class="label">费用：</span>
            <span class="value fee">¥{{ appointmentInfo.fee.toFixed(2) }}</span>
          </div>
          <div class="info-item">
            <span class="label">时间：</span>
            <span class="value">{{ appointmentInfo.time }}</span>
          </div>
        </div>
      </div>

      <div class="card">
        <div class="card-header">
          <el-icon class="card-header-icon"><CreditCard /></el-icon>
          <span>选择缴费方式</span>
        </div>
        
        <div class="payment-options">
          <button
            v-for="option in paymentOptions"
            :key="option.id"
            class="payment-button"
            :class="{ active: selectedOption === option.id }"
            @click="selectOption(option)"
          >
            <div class="button-content">
              <el-icon class="button-icon">
                <component :is="option.icon" />
              </el-icon>
              <span class="button-text">{{ option.name }}</span>
            </div>
          </button>
        </div>

        <div
          v-if="showInsuranceOption && selectedOption === 'insurance'"
          class="insurance-option"
        >
          <el-checkbox v-model="useInsurance"> 
            <span class="checkbox-label">使用生育保险支付</span>
          </el-checkbox>
          <div class="insurance-desc">
            生育保险可覆盖本次挂号费用，剩余金额将退回您的医保账户
          </div>
        </div>
      </div>
    </div>

    <div class="action-buttons">
      <button class="back-button" @click="goBack">返回上一步</button>
    </div>
  </div>
</template>

<script setup>
import { ref,shallowRef, computed, onMounted } from "vue";
import { 
  InfoFilled, 
  CreditCard, 
  User, 
  Wallet
} from "@element-plus/icons-vue";

const props = defineProps({
  appointmentInfo: {
    type: Object,
    required: true
  },
  departmentId: {
    type: [String, Number],
    required: true
  }
});

const emit = defineEmits(['payment-method-selected', 'back']);

const selectedOption = shallowRef("");
const useInsurance = ref(false);

// 缴费选项
const paymentOptions = shallowRef([
  { id: "insurance", name: "职工医保支付", icon: User },
  { id: "selfpay", name: "自费支付", icon: Wallet },
]);

// 检查是否为妇产科，显示生育险选项
const showInsuranceOption = computed(() => {
  return parseInt(props.departmentId) === 3; // 妇产科ID
});

const selectOption = (option) => {
  selectedOption.value = option.id;
  
  // 自动触发下一步，带300ms延迟让用户看到点击效果
  setTimeout(() => {
    emit('payment-method-selected', {
      paymentMode: selectedOption.value,
      useInsurance: useInsurance.value
    });
  }, 300);
};

const goBack = () => {
  emit('back');
};

// 组件挂载时默认选择第一个选项
onMounted(() => {
  if (paymentOptions.value.length > 0) {
    selectedOption.value = paymentOptions.value[0].id;
  }
});
</script>

<style lang="scss" scoped>
.payment-container {
  width: 900px;
  margin: 0 auto;
  background: white;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  padding: 24px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #eaeef2;
}

.page-title {
  font-size: 24px;
  font-weight: 600;
  color: #1f2f3d;
}

.step-indicator {
  color: #606266;
  font-size: 14px;
  background: #f5f7fa;
  padding: 6px 12px;
  border-radius: 16px;
}

.content-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
}

.card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  height: fit-content;
}

.card-header {
  display: flex;
  align-items: center;
  padding: 16px;
  background: #f9fafb;
  border-bottom: 1px solid #eaeef2;
  font-weight: 500;
  color: #1f2f3d;
}

.card-header-icon {
  margin-right: 8px;
  color: #3b82f6;
}

.info-grid {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.label {
  color: #606266;
  font-weight: 500;
}

.value {
  color: #1f2f3d;
  font-weight: 500;
}

.value.fee {
  color: #ef4444;
  font-weight: 600;
}

.payment-options {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.payment-button {
  display: flex;
  align-items: center;
  padding: 20px;
  border: 2px solid #3b82f6;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  width: 100%;
  
  // 默认就是选中状态的样式
  .button-icon,
  .button-text {
    color: white;
  }

  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(59, 130, 246, 0.3);
}

.button-content {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  justify-content: center;
}

.button-icon {
  margin-right: 12px;
  font-size: 24px;
  transition: color 0.3s;
}

.button-text {
  font-size: 18px;
  font-weight: 600;
  transition: color 0.3s;
}

.insurance-option {
  margin: 0 16px 16px;
  padding: 20px;
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border-radius: 8px;
  border: 1px solid #bbf7d0;
}

:deep(.el-checkbox) {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

:deep(.el-checkbox__label) {
  font-weight: 600;
  color: #166534;
  font-size: 15px;
}

.checkbox-label {
  font-weight: 600;
  color: #166534;
}

.insurance-desc {
  font-size: 14px;
  color: #166534;
  line-height: 1.5;
  opacity: 0.9;
}

.action-buttons {
  display: flex;
  justify-content: center;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid #eaeef2;
}

.back-button {
  width: 200px;
  height: 50px;
  background: white;
  color: #606266;
  border: 1px solid #dcdfe6;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;

  &:hover {
    background: #f5f7fa;
    border-color: #c0c4cc;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
}

@media (max-width: 968px) {
  .payment-container {
    width: 100%;
    padding: 16px;
  }
  
  .content-wrapper {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .payment-button {
    padding: 16px;
  }
  
  .button-icon {
    font-size: 20px;
    margin-right: 10px;
  }
  
  .button-text {
    font-size: 16px;
  }
  
  .back-button {
    width: 100%;
    height: 48px;
  }
}
</style>